// *************************渲染页面
function getList() {
    $.ajax({
        url: '/admin/links',
        success: function (res) {

            let str = "";

            res.data.forEach(item => {

                str += `<tr>
                        <td>${item.id}</td>
                        <td><img src="http://localhost:8888/uploads/${item.linkicon}" style="background-color:black"></td>
                        <td>${item.linkname}</td>
                        <td>${item.linkurl}</td>
                        <td>${item.linkdesc}</td>
                        <td>
                        <button class="layui-btn layui-btn-normal edit" data-id="${item.id}" data-linkname="${item.linkname}" data-linkurl="${item.linkurl}" data-linkdesc="${item.linkdesc}" data-linkicon="${item.linkicon}">编辑</button>
                        <button class="layui-btn layui-btn-normal" id="del" data-id="${item.id}">删除</button>
                        </td>
                        </tr>`
            })
            $("#tbody").html(str);
        }
    })
}
getList();

// *************************删除事件
function delList() {
    $(".layui-table #tbody").on("click", "#del", function () {
        //要做提示
        layer.confirm("确认要删除嘛?", (index) => {
            //用自定义属性获取id
            let id = $(this).attr("data-id");

            $.ajax({
                url: "/admin/links/" + id,
                type: "DELETE",
                success: function (res) {
                    if (res.status == 0) {
                        layer.msg(res.message)
                        getList();
                    } else {
                        layer.msg(res.message)
                    }

                }
            })
        })

    })

}
delList();


// ************************添加事件

let add_str = `<form class="layui-form" action=""  lay-filter="add">
    <div class="layui-form-item">
        <label class="layui-form-label">链接名称</label>
            <div class="layui-input-block">
                <input type="text" name="linkname" required  lay-verify="required" placeholder="请输入链接" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-item">
        <label class="layui-form-label">链接地址</label>
            <div class="layui-input-block">
                <input type="text" name="linkurl" required  lay-verify="required" placeholder="请输入链接地址" autocomplete="off" class="layui-input"></div>
            <div class="layui-form-item">
        <label class="layui-form-label">链接描述</label>
            <div class="layui-input-block">
                <input type="text" name="linkdesc" required  lay-verify="required" placeholder="请输入链接描述" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-item">
     
        </div>

        <div class="layui-input-block cover-box">
    
        <!-- 右侧预览区域和选择封面区域 -->
            <div class="cover-right">
                    <!-- 预览的区域 -->
                   
                <input type="file" id="linkFile" style="display: none;" name="linkicon">
                 <img id="preIcon" src="" style="width:100px;height:50px">
                    <!-- 选择封面按钮 -->
                <button type="button" class="layui-btn layui-btn-danger upload-btn" id="urlIcon">上传图片</button>
            </div>


           </div>
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo" id="yes_add">确认添加</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
        </form>`



function addList() {
    $("#add").on("click", function () {
        // 配置弹出框
        let index = layer.open({
            type: 1 //Page层类型
                ,
            area: ['500px', '300px'],
            title: '添加友情列表',

            content: add_str
        });

        $("#image").cropper({
            aspectRatio: 1,
            preview: '.img-preview'
        });

        // 文件上传按钮点击
        $(".upload-btn").click(function () {
            $("#linkFile").click();

        });

        // 图片更换
        $("#linkFile").on("change", function () {
            //1. 获取图片对象
            let obj = this.files[0];

            // 2.专门方法，把图片对象转化为临时URL地址
            let url = URL.createObjectURL(obj);

            // 3.替换到上面图片位置   查文档 了解
            $('#preIcon').cropper("replace", url);
        });


        $("form").on("submit", function (e) {

            e.preventDefault();

            let data = new FormData(this);

            $.ajax({
                processData: false, //
                contentType: false, //重要
                url: "/admin/links",
                type: "POST",
                data,
                success: function (res) {

                    if (status == 0) {
                        layer.msg(res.message);
                        getList();
                        layer.close(index)
                    } else {
                        layer.msg(res.message);
                    }

                }
            })
        })

    })
}
addList();


// ************************编辑
let edit_str = `<form class="layui-form" id="edit" action=""  lay-filter="edit">
    <div class="layui-form-item">
        <label class="layui-form-label">链接名称</label>
            <div class="layui-input-block">
                <input type="text" name="linkname" required  lay-verify="required" placeholder="请输入链接" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-item">
        <label class="layui-form-label">链接地址</label>
            <div class="layui-input-block">
                <input type="text" name="linkurl" required  lay-verify="required" placeholder="请输入链接地址" autocomplete="off" class="layui-input"></div>
            <div class="layui-form-item">
        <label class="layui-form-label">链接描述</label>
            <div class="layui-input-block">
                <input type="text" name="linkdesc" required  lay-verify="required" placeholder="请输入链接描述" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-item">
     
        </div>

        <div class="layui-input-block cover-box">
    
        <!-- 右侧预览区域和选择封面区域 -->
            <div class="cover-right">
                    <!-- 预览的区域 -->
                   
                <input type="file" id="linkFile" style="display: none;" name="linkicon">
                 <img id="preIcon" src="" style="width:100px;height:50px;background-color:black">
                    <!-- 选择封面按钮 -->
                <button type="button" class="layui-btn layui-btn-danger upload-btn" id="urlIcon">上传图片</button>
            </div>


           </div>
            <div class="layui-input-block">
                <input type="hidden" name="id" />
                <button class="layui-btn" lay-submit lay-filter="formDemo" id="yes_add">确认修改</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
        </form>`
let form = layui.form;
let editIndex;

function editList() {
    $(".layui-table #tbody").on("click", ".edit", function () {
        // 1.获取自定义表单的数据
        let data = $(this).data();
        // 2. 配置弹窗
        editIndex = layer.open({
            type: 1, // 弹窗里面有丰富HTML结构内容
            title: '修改类别',
            content: edit_str,
            area: ['500px', '300px'],
            success: function () {
                // 2.给表单赋值
                $('#preIcon').attr('src', 'http://localhost:8888/uploads/' + data.linkicon);
                delete data.linkicon;
                form.val("edit", data)
            }
        });
        $("#image").cropper({
            aspectRatio: 1,
            preview: '.img-preview'
        });

        // 文件上传按钮点击
        $(".upload-btn").click(function () {
            $("#linkFile").click();

        });

        // 图片更换
        $("#linkFile").on("change", function () {
            //1. 获取图片对象
            let obj = this.files[0];

            // 2.专门方法，把图片对象转化为临时URL地址
            let url = URL.createObjectURL(obj);

            // 3.替换到上面图片位置   查文档 了解
            $('#preIcon').cropper("replace", url);
        });
    })
}

editList();



$("body").on("submit", '#edit', function (e) {

    e.preventDefault();

    let data = new FormData(this);

    $.ajax({
        processData: false, //
        contentType: false, //重要
        url: "/admin/links/" + data.get('id'),
        type: "PUT",
        data,
        success: function (res) {

            if (status == 0) {
                layer.msg(res.message);
                getList();
                layer.close(editIndex)
            } else {
                layer.msg(res.message);
            }

        }
    })
})